<template>
  <div class="data-help">
    <div class="data-help-header pt116">
      <div class="main">
        <div class="data-help-title">帮助与文档</div>
        <div class="data-help-input">
          <InputSearch
            v-model:value="search"
            placeholder="请输入您要查询的关键词，例如ca、聘用等"
            enter-button="搜 索"
            size="large"
            @search="handlePressEnter"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </InputSearch>
        </div>
        <ul class="flex data-help-top-hot" @click="noArticle">
          <li v-for="item in hots" :key="item.key">
            {{ item.label }}
            <!-- <router-link to="/">{{item.label}}</router-link>-->
          </li>
        </ul>
      </div>
    </div>
    <Tabs
      v-if="showCard"
      class="help-con"
      type="card"
      v-model:activeKey="activeKey"
    >
      <TabPane
        v-for="(item, index) in sets"
        :key="index"
        :tab="`${item.data.itemName}`"
      >
        <template v-if="index == '0'">
          <Problem :list="item.children"></Problem>
        </template>
        <template v-else>
          <ArticleList
            :newItem="{
              itemId: item.data.itemId,
              itemName: item.data.itemName,
              children: item.children,
            }"
          ></ArticleList>
        </template>
      </TabPane>
    </Tabs>
    <div class="searchCon" v-else>
      <div class="searchTab">
        <div class="searc-content">
          <h2>
            为您搜索到相关结果<span>{{ page.total }}</span
            >条
          </h2>
          <span @click="back">返回上一级</span>
        </div>
      </div>
      <List
        item-layout="horizontal"
        :data-source="list"
        :pagination="page"
        :loading="loading"
      >
        <template #renderItem="{ item }">
          <ListItem>
            <a
              target="_blank"
              :href="`/articleDetail/${item.article_id}`"
              class="al-list-item"
            >
              <h4>{{ item.article_title }}</h4>
              <p class="nowrap">{{ item.article_summary }}</p>
            </a>
          </ListItem>
        </template>
      </List>
    </div>
    <!-- <ModalAwait v-model:visible="awaitVisible" /> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive, toRefs } from "vue";
import { Input, message, Tabs, List } from "ant-design-vue";
import { SearchOutlined, DoubleRightOutlined } from "@ant-design/icons-vue";
import { Problem, ArticleList } from "./components/index";
import { getArticleTreeApi, getArticleListApi } from "/@/api/article";
import { configItem } from "/@/api/common";
export default defineComponent({
  name: "helpList",
  components: {
    Problem,
    ArticleList,
    Input,
    InputSearch: Input.Search,
    SearchOutlined,
    DoubleRightOutlined,
    Tabs,
    TabPane: Tabs.TabPane,
    List,
    ListItem: List.Item,
  },
  setup() {
    const hots = ref<configItem[]>([
      { key: 0, path: "/", label: "实名制" },
      { key: 1, path: "/", label: "项目信息" },
      { key: 2, path: "/", label: "新系统" },
      { key: 3, path: "/", label: "施工许可证" },
      { key: 4, path: "/", label: "CA锁" },
      { key: 5, path: "/", label: "人员证书" },
    ]);

    const noArticle = () => {
      message.warning("此功能暂未开放,敬请期待!");
    };

    const sets = ref([]);
    const getArticleTree = async () => {
      sets.value = await getArticleTreeApi({
        includeSelf: 0,
        itemId: "cms_bz",
      });
    };

    const handlePressEnter = () => {
      showCard.value = false;
      getArticleList({ current: 1 });
    };

    const search = ref<string>("");
    const showCard = ref<boolean>(true);
    const activeKey = ref<number>(0);
    const config = reactive({
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1,
         onChange:function (page:number){
          getArticleList({ current: page });
        }
      },
    });

    const getArticleList = async (pagination) => {
      const { current } = pagination;
      let { loading, list } = toRefs(config);
      loading.value = true;
      let data = await getArticleListApi({
        searchKey: search.value,
        itemId: "",
        current,
      });
      list.value = data.records;
      config.page.current = data.current;
      config.page.total = data.total;
      loading.value = false;
    };

    const back = () => {
       showCard.value = true;
       search.value=""
    }

    const init = () => {
      getArticleTree();
    };

    onMounted(init);

    return {
      hots,
      sets,
      search,
      activeKey,
      showCard,
      ...toRefs(config),
      handlePressEnter,
      noArticle,
      back
    };
  },
});
</script>

<style lang="less" scoped>
.data-help {
  background: @white;

  .data-help-header {
    height: 430px;
    background: url(/src/assets/img/help_bg.png) no-repeat center/cover;

    .main {
      width: 780px;
      padding-top: 60px;
      margin: 0 auto;

      .data-help-title {
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 45px;
        color: white;
        text-align: center;
      }

      .data-help-input {
        height: 54px;

        ::v-deep(.ant-input-search) {
          .ant-input-search {
            height: 54px;
            padding: 8px 20px;
          }

          .ant-input-prefix {
            display: none;
            padding: 0 10px;
            font-size: 20px;
            color: #cd1922;
          }

          .ant-input-search-button {
            width: 120px;
            height: 54px;
            background: #cd1922;
            border-color: #cd1922;
          }
        }
      }

      ul.data-help-top-hot {
        padding-top: 16px;

        li {
          position: relative;
          margin-right: 32px;
          font-size: 13px;
          line-height: 26px;
          color: fade(@white, 70%);
          cursor: pointer;

          &:not(:last-child)::after {
            position: absolute;
            top: 8px;
            right: -16px;
            height: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            content: "";
          }

          a {
            &:hover {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

.help-con {
  min-height: 500px;

  ::v-deep(.ant-tabs-bar) {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #e0e5eb;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);

    .ant-tabs-nav-container {
      width: 1200px;
      height: 60px !important;
      margin: 0 auto;

      .ant-tabs-tab {
        height: 60px;
        padding: 20px 0;
        margin-right: 80px;
        font-size: 16px;
        line-height: 20px;
        color: #222;
        background: @white;
        border: 0;
        border-bottom: 3px solid transparent;

        &.ant-tabs-tab-active {
          color: #0078ff;
          border-bottom: 3px solid #0078ff;
        }
      }
    }
  }
}

.searchCon {
   min-height: 500px;
  padding-bottom: 40px;

  .searchTab {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);

    .searc-content {
      display: flex;
      width: 1200px;
      height: 60px;
      margin: 0 auto;
      align-items: center;
      justify-content: space-between;

      h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;

        span {
          color: #0078ff;
        }
      }

      span{
        cursor: pointer;
      }
    }
  }

  ::v-deep(.ant-list) {
    width: 1200px;
    margin: 0 auto;

    .ant-list-item{
      padding: 22px 16px;
      margin: 0;
      border-bottom: 1px dashed #E9E8E8;

      h4{
        margin-bottom: 4px;
        font-size: 16px;
        line-height: 22px;
        color: #333;
      }

      .nowrap{
        margin: 0;
      }
    }
  }
}
</style>


